<template>
  <div>
    <ul>
      <li>监听对象 ： {{ obj.count }}</li>
      <li>
        <van-button type="primary" size="small" @click="obj.count+=1">初始对象中的值 obj.count+1</van-button>
      </li>
      <li> 监听单一变量： {{ a }}
      </li>
      <li>
        <van-button type="primary" size="small" @click="a+=1">初始值 a+1</van-button>

      </li>
      <li> 监听数组： {{ arr }}
      </li>
      <li>
        <van-button type="primary" size="small" @click="arr.push(a+=1)">初始数组 push</van-button>

      </li>
    </ul>

    <br/>

  </div>
</template>

<script>
import {
  ref,
  reactive,
  watch
} from 'vue';

export default {
  name: "watch",
  setup() {
    const a = ref(0);
    let arr = ref([0]);
    // 通过watch来监听数组

    watch(arr.value, (newValue, valueOld) => {
      console.log("arr改变了")
    })
    // reactive: 会对对象进行包装
    const obj = reactive({
      count: 0
    })

    // 通过watch来监听
    watch(a, () => {
      console.log("变量a改变了")
    })
    // 通过watch来监听对象
    watch(() => obj.count, () => {
      console.log("obj.count改变了")
    })

    return {
      a,
      obj,
      arr,
    }
  }
}
</script>